<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <link rel="stylesheet" href="/assets/lib/bootstrap/css/bootstrap.min.css">
    <link href="/assets/lib/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/lib/bootstrap-fileinput/themes/explorer-fas/theme.css" media="all" rel="stylesheet"
          type="text/css"/>
    <script type="text/javascript" src="/assets/js/jquery.js"></script>
    <script src="/assets/lib/bootstrap-fileinput/js/fileinput.min.js"></script>
</head>
<body>
<div class="container my-2">
    <div class="form-group"><label for="" class="col-sm-2 control-label">个人头像</label>
        <div class="col-sm-10"><input id="myFile" type="file" name="myFile" class="fileloading"></div>
        <input type="hidden" name="user.logo" id="logo">
    </div>
</div>
</body>
<script>
    $('#file-fr').fileinput({
        theme: 'fa',
        language: 'zh',
        uploadAsync: true,//异步上传
        uploadUrl: 'uploadFile.htm',
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        maxFileSize: 0,
        maxFileCount: 1
    }).on("fileuploaded", function (event, data) { //异步上传成功结果处理
        alert(data.response.src);
        // $("#userImage").val(data.response.src);
    });
    $("#myFile").fileinput({
        language: 'zh',
        uploadUrl: "uploadFile.htm",
        enctype : 'multipart/form-data',
        autoReplace: true,
        dropZoneEnabled : false,
        maxFileCount: 1,
        allowedFileExtensions: ["jpg", "png", "gif"],
        browseClass: "btn btn-primary", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
    }).on("fileuploaded", function (e, data) {
        var res = data.response;
        alert(res.success);
        // $("#logo").attr("value", res.success);
    })

</script>
</html>